import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { hashHistory } from 'react-router';
import { WingBlank, WhiteSpace, ActionSheet } from 'antd-mobile';
import * as userInfoActions from 'common/userinfo.js';
import './user.less';

class User extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	clicked: null,
	    }
	}

	gotoUserInfo = () => {
		hashHistory.push("/userInfo")
	}

	gotoUserCash = () => {
		hashHistory.push("/userCash")
	}

	gotoUserOrder = () => {
		hashHistory.push("/userOrder")
	}

	gotoUserNotify = () => {
		hashHistory.push("/userNotify")
	}

	componentWillUnmount(){
		this.props.userInfoActions.update({
			prevRouteUrl: 'user'
		})
	}

	render(){
		return(
			<div className="user">
				<div className="userInfo">
					<div className="operate">
						<img className="setting" src="assets/img/setting.png"/>
					</div>
					<div className="userInfo_head">
						<img src="assets/img/head.png" onClick={this.gotoUserInfo}/>
						<span>海绵宝宝</span>
					</div>
				</div>	
				
				<div className="userMenu">
					<WingBlank>
						<ul>
							<li onClick={this.gotoUserInfo}>
								<img src="assets/img/my_info.png"/>
								<span>我的信息</span>
							</li>
							<li onClick={this.gotoUserCash}>
								<img src="assets/img/my_book_icon.png"/>
								<span>我的书币</span>
							</li>
						</ul>
					</WingBlank>
					<WhiteSpace style={{height: '0.2rem'}}/>
					<WingBlank>
						<ul>
							<li onClick={this.gotoUserOrder}>
								<img src="assets/img/my_order.png"/>
								<span>我的订单</span>
							</li>
							<li onClick={this.gotoUserNotify}>
								<img src="assets/img/my_msg.png"/>
								<span>我的消息</span>
							</li>
						</ul>
					</WingBlank>
					<WhiteSpace style={{height: '0.2rem'}}/>
					<WingBlank>
						<ul>
							<li>
								<img src="assets/img/my_history.png"/>
								<span>阅读历史</span>
							</li>
							<li>
								<img src="assets/img/my_collect.png"/>
								<span>收藏书籍</span>
							</li>
						</ul>
					</WingBlank>
				</div>
			</div>
		)
	}
}

function mapStateToProps(state){
	return {
		userinfo: state.userinfo
	}
}

function mapDispatchToProps(dispatch){
	return {
		userInfoActions: bindActionCreators(userInfoActions, dispatch)
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(User);